<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距-边框</title>
</head>
<style>
    div:nth-of-type(1){
        /*宽--高*/
        /*width: 400px;*/
        /*height: 400px;*/
        /*最大宽--高*/
        max-width: 800px;
        max-height: 800px;
        /*最小宽--高*/
        min-width: 100px;
        min-height: 100px;
        color: aqua;
        background-color: gray;
        /*上外边距*/
        /*margin-top: 20px;*/
        /*左外边距*/
        /*margin-left: 30px;*/
        /*右外边距*/
        /*margin-right: 40px;*/
        /*下外边距*/
        /*margin-bottom: 50px;*/
        /*复合属性-外边距  顺序：上 右 下 左*/
        margin: 20px 30px 40px 50px;
        /*上内边距*/
        /*padding-top: 20px;*/
        /*左内边距*/
        /*padding-left: 30px;*/
        /*右内边距*/
        /*padding-right: 40px;*/
        /*下内边距*/
        /*padding-bottom: 50px;*/
        /*复合属性-外边距  顺序：上 右 下 左*/
        padding: 20px 30px 40px 50px;
    }
    div:nth-of-type(2){
        /*默认宽度，就是不设置width属性，这时候div的总宽度是=父content-自身的周围margin
           内容区的宽度=父的content-自身的周围margin-自身作用padding-自身作用border*/
        height: 200px;
        margin: 50px;
        background-color: aqua;
        color: gray;
    }
    div:nth-of-type(3){
        width: 300px;
        height: 200px;
        background-color: pink;
        color: gray;
        /*外边距为自动调整时，会相对外面的父container居中*/
        margin: auto;
        /*使用display: flex;先将div设置为一个弹性盒子，就可以对里面的子元素的水平对齐和垂直对齐都能很方便的进行操控*/
        display: flex;
        /*属性（水平）对齐弹性容器的项目*/
        justify-content: center;
        /*属性垂直对齐项目。*/
        align-items: center;
    }
</style>
<body>
    <div>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.</div>
    <hr>
    <div>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.</div>
    <hr>
    <div>Lorem ipsum dolor sit amet.</div>
</body>
</html>